 <template>
   <view style="width: 100%;height: 100%;">
     <view class="root" :style="{display: !visibleCamera ? 'flex': 'none'}">
       <view class="content">
         <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
           err-show-type="toast">
           <view class="content-wrapper">
             <yy-title title="手机信息"></yy-title>
             <view class="content-inner-wrapper">
               <uni-forms-item label="IMEI码1：" name="imeiOne" required key="imeiOne">
                 <view class="label-IMEI" slot="label">
                   <view class="l-text">
                     <text class="is-required" style="">*</text>
                     IMEI码1：
                   </view>
                   <view class="r-text" @click="handleGetImei">如何获取手机IMEI码<u-icon name="question-circle" color="#D91313"
                       size="21rpx"></u-icon>
                   </view>
                 </view>
                 <view class="form-content-item" :class="form.imeiOne ?  '' : 'input-item'">
                   <uni-easyinput type="number" :maxlength="30" v-model.trim="form.imeiOne" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="IMEI码2：" name="imeiTwo" key="imeiTwo">
                 <view class="form-content-item" :class="form.imeiTwo ?  '' : 'input-item'">
                   <uni-easyinput type="number" :maxlength="30" v-model.trim="form.imeiTwo" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="手机型号：" name="phoneModule" required key="phoneModule">
                 <view class="form-content-item" :class="form.phoneModule ?  '' : 'input-item'">
                   <uni-easyinput type="text" :maxlength="30" v-model.trim="form.phoneModule" :inputBorder="false"
                     placeholder="请填写" :clearable="true" />
                 </view>
               </uni-forms-item>
               <uni-forms-item label="手机图片: (最多可上传3张图片，非必填)" name="imgList" style="margin-bottom: 0;">
                 <u-upload :fileList="form.imgList" @afterRead="(info) => afterReadFive(info, 'form', 74)"
                   @delete="(info) => deletePhoto(info, 'form')" name="imgList" :maxCount="3" :multiple="true"
                   width="96" height="80">
                   <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
                 </u-upload>
               </uni-forms-item>
             </view>
           </view>
           <view class="content-wrapper">
             <yy-title title="物品所属人信息"></yy-title>
             <uni-forms-item label="身份证号:" name="belongingPersonIdcard" required key="belongingPersonIdcard">
               <view class="form-content-item" :class="form.belongingPersonIdcard ?  '' : 'input-item'">
                 <uni-easyinput type="idcard" :maxlength="18" v-model.trim="form.belongingPersonIdcard"
                   :inputBorder="false" placeholder="请填写" :clearable="true" />
                 <u-icon slot="right" size="21" name="scan" color="#2488F5" @click="handleCamera"></u-icon>
               </view>
             </uni-forms-item>
             <uni-forms-item label="姓名:" name="belongingPersonName" required key="belongingPersonName">
               <view class="form-content-item" :class="form.belongingPersonName ?  '' : 'input-item'">
                 <uni-easyinput type="text" v-model.trim="form.belongingPersonName" :inputBorder="false"
                   placeholder="请填写" :maxlength="30" :clearable="true" />
               </view>
             </uni-forms-item>
             <uni-forms-item label="联系电话:" name="belongingPersonMobile" required key="belongingPersonMobile">
               <view class="form-content-item" :class="form.belongingPersonMobile ?  '' : 'input-item'">
                 <uni-easyinput type="number" :maxlength="11" v-model.trim="form.belongingPersonMobile"
                   :inputBorder="false" placeholder="请填写" :clearable="true" />
               </view>
             </uni-forms-item>
           </view>
         </uni-forms>
       </view>
       <view class="bottom">
         <yy-button-submit @submit="onSubmit"></yy-button-submit>
       </view>
     </view>

     <u-popup :show="showTips" mode="center" @close="showTips = false" @open="showTips = true" :round="12">
       <view class="IMEI-content-wrapper">
         <view class="t-top">获取手机IMEI码方式</view>
         <view class="t-bottom">在拨号键盘中输入*#06#按下拨号键。</view>
         <view class="know-b" @click="showTips = false">
           我知道了
         </view>
       </view>
     </u-popup>

     <yy-photo-mask :visible.sync="visibleCamera" :baseImgUrl="baseImgUrl" :clientId="clientId"
       :clientSecret="clientSecret" @parsedSuccess="onParsedSuccess"></yy-photo-mask>
   </view>
 </template>

 <script>
   import {
     registeredPhoneSave
   } from '../api/api'
   import uploadFileMixin from '../utils/upload-file-mixin'
   import {
     Toast,
     getOptionsParams,
     idCardRule,
     isLoading,
     navBack,
     navTo,
     phoneRule
   } from '../utils/util'
   export default {
     mixins: [uploadFileMixin],
     data() {
       return {
         baseImgUrl: this.$baseImgUrl,
         clientId: this.$clientId,
         clientSecret: this.$clientSecret,
         visibleCamera: false,
         form: this.initForm(),
         routerParams: {},
         showTips: false,
         rules: {
           imeiOne: {
             rules: [{
               required: true,
               errorMessage: "请填写IMEI码1！",
             }]
           },
           imeiTwo: {
             rules: [{
               required: false,
               errorMessage: "请填写IMEI码2！",
             }]
           },
           phoneModule: {
             rules: [{
               required: true,
               errorMessage: "请填写手机型号！",
             }]
           },
           pathList: {
             rules: [{
               required: false,
               errorMessage: "请上传手机图片！",
             }]
           },
           belongingPersonIdcard: {
             rules: idCardRule()
           },
           belongingPersonName: {
             rules: [{
               required: true,
               errorMessage: "请填写姓名！",
             }]
           },
           belongingPersonMobile: {
             rules: phoneRule()
           },
         }
       }
     },
     onLoad(options) {
       this.routerParams = getOptionsParams(options)
     },
     onReady() {
       this.$refs.formRef.setRules(this.rules)
     },
     methods: {
       initForm() {
         return {
           imeiOne: '',
           imeiTwo: '',
           phoneModule: '',
           belongingPersonIdcard: '',
           belongingPersonName: '',
           belongingPersonMobile: '',
           imgList: []
         }
       },
       onSubmit() {
         this.$refs.formRef.validate().then(() => {
             let data = {
               companyMessageId: this.routerParams.companyMessageId,
               ...this.form,
             };

             // 处理图片信息
             if (data.imgList) {
               data.imgList = data.imgList.map(item => {
                 return item.halfPath
               })
             }
             isLoading(true)
             registeredPhoneSave(data).then((res) => {
                 if (res.code == 200) {
                   setTimeout(() => {
                     navBack();
                   }, 100)
                   uni.$emit('register-load')
                 }
                 Toast(res.message);
               })
               .finally(() => {
                 isLoading(false)
               })
           })
           .catch(() => {})
       },
       handleCamera() {
         this.visibleCamera = true;
       },
       onParsedSuccess(value) {
         const {
           domicileAddress,
           userName,
           idcard,
           nation
         } = value;
         this.$set(this.form, "belongingPersonName", userName);
         this.$set(this.form, "belongingPersonIdcard", idcard);
         this.visibleCamera = false;
       },
       handleGetImei() {
         navTo({
           url: '/itemRegistration/getImei'
         })
       }
     }
   }
 </script>

 <style lang="scss" scoped>
   @import '@/styles/uni-form-label-top.scss';

   .root {
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: column;
     background: #F9F9F9;

     .content {
       flex: 1;
       height: 0;
       overflow: auto;

       .content-wrapper {
         background: #FFFFFF;
         box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
         border-radius: 8rpx 8rpx 8rpx 8rpx;
         padding: 40rpx 20rpx;
         margin-bottom: 10rpx;

         .label-IMEI {
           display: flex;
           justify-content: space-between;
           align-items: center;
           height: 72rpx;

           /deep/.is-required {
             color: #dd524d;
             font-weight: bold;
           }

           .l-text {
             font-weight: 500;
             font-size: 30rpx;
             color: #666666;
           }

           .r-text {
             font-weight: 400;
             font-size: 22rpx;
             color: #D91313;
             display: flex;
             justify-content: space-between;
             align-items: center;

             /deep/.u-icon {
               margin-left: 5rpx;
             }
           }
         }
       }

       .pawn-list-wrapper {
         background: #F9F9F9;
         padding: 25rpx;
         margin-bottom: 10rpx;

         .title-name {
           display: flex;
           justify-content: space-between;
           margin-bottom: 23rpx;

           .name-i {
             font-weight: bold;
             font-size: 32rpx;
             color: #181818;
           }

           .delete-i {
             display: flex;
             align-items: center;
             font-weight: 500;
             font-size: 26rpx;
             color: #F94A4A;
             flex-shrink: 0;

             .text-delete {
               margin-left: 10rpx;
             }
           }
         }

         .i-item {
           margin-bottom: 15rpx;
           display: flex;

           .i-label {
             font-weight: 500;
             font-size: 28rpx;
             color: #999999;
             width: 119rpx;
             margin-right: 16rpx;
             position: relative;
             text-align: justify;
             text-align-last: justify;
             flex-shrink: 0;



             &::after {
               content: ':';
               position: absolute;
               right: -8rpx;
             }
           }

           .i-value {
             font-weight: bold;
             font-size: 28rpx;
             color: #101010;
           }

         }
       }

       .datetime-picker-wrapper {
         display: flex;
         align-items: center;
         justify-content: space-between;

         .text-t {
           font-weight: 500;
           font-size: 30rpx;
           color: #666666;
         }

         .t-item {
           font-weight: 400;
           font-size: 28rpx;
           color: #A2A2A2;
           width: 304rpx;
           height: 70rpx;
           background: #F9F9F9;
           border-radius: 8rpx 8rpx 8rpx 8rpx;
           border: 1rpx solid #F1EEEE;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .has-value {
           font-weight: bold;
           font-size: 30rpx;
           color: #181818;
         }
       }
     }
   }

   .IMEI-content-wrapper {
     padding: 63rpx 123rpx 56rpx 123rpx;
     width: 590rpx;

     .t-top {
       font-weight: bold;
       font-size: 36rpx;
       color: #181818;
       text-align: center;
     }

     .t-bottom {
       text-align: center;
       font-weight: 500;
       font-size: 28rpx;
       color: #333333;
       margin-top: 45rpx;
       margin-bottom: 93rpx;
     }

     .know-b {
       width: 320rpx;
       height: 88rpx;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #2488F5;
       border-radius: 44rpx 44rpx 44rpx 44rpx;
       border: 1rpx solid #ACCBEC;
       margin: 0 auto;
       font-weight: 500;
       font-size: 36rpx;
       color: #F9F9F9;
     }
   }
 </style>